<template>
  <n-space class="page-banner-list" vertical>
    <n-data-table :columns="columns" :data="displayData"></n-data-table>

    <div class="page-banner__footer">
      <n-pagination v-model:page="page" :page-count="pageCount" />
    </div>
  </n-space>
</template>

<script>
import { h } from "vue";
import { getBannerList } from "@/api/banner";

/**
 * 前端分页，需要哪些数据：
 *  1. page - 当前页
 *  2. pageSize - 每页显示条数
 *  3. count - 数据总条数（后端返回）
 *  4. pageCount - 总的页数（后端返回or前端计算）
 */
export default {
  name: 'banner_list',

  data() {
    return {
      columns: [
        {
          title: "Img",
          key: "img",
          width: 240,
          render: (row) => {
            return h("img", { src: row.img, style: "width: 200px" });
          },
        },
        { title: "Alt", key: "alt" },
        { title: "Link", key: "link" },
      ],
      data: [],
      
      // 表示当前的页码数
      page: 1,
      // 每页显示条数
      pageSize: 2,
      // 总条数
      count: 1,
    };
  },

  computed: {
    // 总的页数 向上取整(总条数/每页显示条数)
    pageCount() {
      return Math.ceil(this.count / this.pageSize)
    },
    // 用于页面显示的data数据，实现分页的切割
    displayData() {
      // 第一页 this.data.slice(0, 2)
      // 第二页 this.data.slice(2, 4)
      // 第三页 this.data.slice(4, 6)
      // 规律   this.data.slice( (this.page - 1) * this.pageSize, this.pageSize * this.page )

      return this.data.slice((this.page - 1) * this.pageSize, this.page * this.pageSize)
    }
  },

  methods: {
    async fetchData() {
      const result = await getBannerList();
      this.data = result.data;
      // result.data 的长度就是总条数
      this.count = result.data.length;
    },
  },

  mounted() {
    this.fetchData();
  },
};
</script>

<style lang="scss" scoped>
.page-banner__footer {
  display: flex;
  justify-content: flex-end;
}
</style>
